<!DOCTYPE html>
<html>

<head>
    <title> Lists and Keys </title>
    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
</head>

<body>
    <div id="root"></div>
</body>

</html>
<script type="text/babel">
    // Extracting Components with Keys

    // Example : Wrong Key Usage
    // function ListItem(props) {
    //     return (
    //         <li key={props.value.toString()}>{props.value}
    //         </li>);
    // }
    // function NumberList(props) {
    //     const numbers = props.numbers;
    //     const listItems = numbers.map((item) =>
    //         <ListItem value={item} />);
    //     return (<ul>{listItems}</ul>);
    // }

    // Example : Correct Key Usage
    function ListItem(props) {
        return (
            <li>{props.value}</li>);
    }
    function NumberList(props) {
        const numbers = props.numbers;
        const listItems = numbers.map((item) =>
            <ListItem key={item.toString()} value={item} />);
        return (<ul>{listItems}</ul>);
    }
    
    const numbers = [1, 2, 3, 4, 5];
    ReactDOM.render(<NumberList numbers={numbers} />, document.getElementById('root'));
</script>